<template>
  <div class="app-container">
    <div>
      <el-input v-model="pageDto.where.code" placeholder="请输入行政区编码" style="width: 250px;margin-left: 20px;"></el-input>
      <el-input v-model="pageDto.where.name" placeholder="请输入行政区名称" style="width: 250px;margin-left: 20px;"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="search">搜索</el-button>
      <el-button type="danger" icon="el-icon-refresh" @click="reset()">清空</el-button>
    </div>
    <div style="margin-top: 20px;">
      <el-table :data="areaList" style="width: 100%;margin-bottom: 20px;"
        :header-cell-style="{ background: '#F7F7F8', color: '#18191B', 'text-align': 'center' }">
        <el-table-column prop="code" label="行政区编码" align="center"> </el-table-column>
        <el-table-column prop="name" label="名称" align="center"> </el-table-column>
        <el-table-column label="等级" align="center">
          <!-- 自定义渲染 -->
          <template slot-scope="scope">
            <span v-if="scope.row.level == 1">省</span>
            <span v-if="scope.row.level == 2">地级市</span>
            <span v-if="scope.row.level == 3">区/县</span>
            <span v-if="scope.row.level == 4">乡/镇</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <!-- 自定义渲染 -->
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">省</span>
            <span v-if="scope.row.type == 2">自治区</span>
            <span v-if="scope.row.type == 3">直辖市</span>
            <span v-if="scope.row.type == 4">特别行政区</span>
            <span v-if="scope.row.type == 5">地级市</span>
            <span v-if="scope.row.type == 6">地区</span>
            <span v-if="scope.row.type == 7">自治州</span>
            <span v-if="scope.row.type == 8">盟</span>
            <span v-if="scope.row.type == 9">市辖区</span>
            <span v-if="scope.row.type == 10">县</span>
            <span v-if="scope.row.type == 11">县级市</span>
            <span v-if="scope.row.type == 12">自治县</span>
            <span v-if="scope.row.type == 13">旗</span>
            <span v-if="scope.row.type == 14">自治旗</span>
            <span v-if="scope.row.type == 15">特区</span>
            <span v-if="scope.row.type == 16">林区</span>
          </template>
        </el-table-column>
        <el-table-column prop="abname" label="简称" align="center"></el-table-column>
        <el-table-column prop="pid" label="父编码" align="center"></el-table-column>
        <el-table-column prop="pname" label="父名称" align="center"></el-table-column>
        <el-table-column prop="note" label="备注" align="center"></el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageDto.now"
        :page-sizes="[5, 10, 50, 100]" :page-size="pageDto.size" layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="text-align: center;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { page } from "@/api/area"
export default {
  data() {
    return {
      areaList: [],
      pageDto: {
        now: 1,
        size: 5,
        where: {}
      },
      pages: 0,
      total: 0,
    }
  },
  methods: {
    //分页页面显示数据多少
    handleSizeChange(size) {
      this.pageDto.size = size;
      this.search();
    },

    //分页页面当前页
    handleCurrentChange(now) {
      this.pageDto.now = now;
      this.search();
    },

    //查询页面所有数据
    search() {
      page(this.pageDto).then((res) => {
        this.areaList = res.list;
        this.pages = res.pages;
        this.total = res.total;
      });
    },

    reset() {
      this.pageDto.where = {}
    },
  },
  created() {
    this.search()
  }


}
</script>

<style></style>
